<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<!--  -->
		<view class="p20">
			<u-form :model="model" ref="uForm" :errorType="errorType">
				<view class="form_box bg-white">
					<view class="title" style="justify-content: space-between;display: flex;align-items: center;">
						<view>
							兑换数额 
						</view>
					</view>
					<view  style="justify-content: space-between;display: flex;align-items: center;">
						<view class="balance_money fs28">
							芒果：<text>{{account.role_value}}</text>
						</view>
						<view class="balance_money fs28">
							芒豆：<text>{{account.role_cost_value}}</text>
						</view>
						<view class="all_btn fs28" style="color: #ff5428;" @click="changeMoney(true);">全部兑换</view>
					</view>
					<u-form-item prop="money" label-width="50" label="￥" :label-style="{'padding-top':'10rpx'}" class="money_input">
						<u-input v-model="model.money" @input="toIntegral" @confirm="changeMoney" :custom-style="{'font-size':'50rpx'}" placeholder-style="font-size:30rpx;" type="number" placeholder="请输入需要转换的余额" />
					</u-form-item>
					
					<view style="margin-top: 10px; color: #666;font-size: 14px;">说明：芒果兑换余额，需要芒果和芒豆1:1兑换。<br/>如：兑换100元余额，需要100芒果和100芒豆</view>
					<view class="balance_money fs32" style="margin-top: 10px;color: darkred;">
						兑换余额：<text style="color: darkred;">{{ to_integral }}</text>
					</view>
				</view>
				<button size="default" shape="circle" type="primary" :loading="isLoading" class="mt40 primarybtn fs32" @click="post" >立即兑换</button>
			</u-form>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				labelPosition: 'left',
				border: false,
				isLoading:false,
				model: {
					money: '',
					maxMoney:0,
					remarks:'',
					to_user:''
				},
				account:{},
				errorType: ['toast'],
				toUserInfo:[],
				to_integral: 0
			}
		},
		onLoad() {
		},
		onShow() {
			this.$u.post('member/api.wallet/getWalletInfo').then(res => {
				this.account = res.data.account;
			});
		},
		onReady() {},
		methods: {
			changeMoney(maxMoney){//提现金额变化
				let max_money = 0;
				if(this.account.role_cost_value < this.account.role_value) {
					max_money = this.account.role_cost_value;
				} else {
					max_money = this.account.role_value;
				}
				this.to_integral = parseFloat(max_money).toFixed(2);
				this.model.money = max_money;
			
				// this.model.maxMoney = 0;
				// if (maxMoney === true){
				// 	this.model.money = this.account.role_value;
				// 	this.model.maxMoney = 1;
				// 	this.to_integral = this.model.money * parseInt(this.account.shop_role_value_to_integral);
				// }else if (this.model.money <= 0){
				// 	return false;
				// }
				
			},
			toIntegral() {
				this.to_integral = this.model.money * 1;
			},
			getToUserInfo:function(e){
				if (e <= 0) {
					this.toUserInfo = [];
					this.model.to_user = 0;
					return false;
				};
				this.$u.post('member/api.Transfer/getToUserInfo',{user_id:e}).then(res => {
					if (res.code == 1) {
						this.toUserInfo = res.data.toUserInfo
						this.model.to_user = this.toUserInfo.user_id;
					}
				});
			},
			changeRemarks(){
				this.model.remarks = '';
			},
			post(){
				let _this = this
				
				let money = parseFloat(_this.model.money);
				let role_value = parseFloat(_this.account.role_value);
				let role_cost_value = parseFloat(_this.account.role_cost_value);
				
				if(money < 1){
					_this.app.showToast('兑换的芒果不能小于1');
					return false;
				}
				
				
				if(money > role_value) {
					_this.app.showToast('您的芒果不够');
					return false;
				}
				
				if(money > role_cost_value) {
					_this.app.showToast('您的芒豆不够');
					return false;
				}
				
				
				uni.showModal({
					title: '提示',
					content: '确认兑换吗？',
					showCancel: true,
					confirmText: '确认',
					cancelText: '取消',
					success: function(res) {
						if (res.confirm) {
							_this.isLoading = true;
							_this.$u.post('member/api.distribution/transform',{role_value: money}).then(res => {
								if(res.code == 0){
									return _this.isLoading = false;
								}
								_this.isLoading = false;
								_this.app.showModal('兑换成功',-1);
							}).catch(res=>{
								_this.isLoading = false;
							});
						}
					}
				});
				
			}
		}
	}
</script>
<style  lang="scss">
	.top_title {
		position: relative;
		background-color: #FFFFFF;
		padding: 0rpx 20rpx;
		display: flex;
		align-items: center;
		height: 100rpx;
		width: 100%;
		.payment_info{
			display: flex;
			align-items: center;
			.u-image {
				display: inline-block;
				margin-right: 10rpx;
			}
			text {
				color: #ff5428;
			}
		}
		.sel_account {
			position: absolute;
			right: 20rpx;
			color: #ff5428;
		}
	}
	
	.form_box {
		padding: 80rpx 40rpx;
		.title {
			font-size: 35rpx;
		}
		.money_input {
			border-radius: 10rpx;
			display: flex;
			background-color: #f8f8f8;
			margin-top: 40rpx;
			padding: 20rpx;
			font-size: 38rpx;
		}
		.balance_money{
			color: #ff5428;
			// margin-top: 20rpx;
			text{
				color: #ff5428;
			}
			.all_btn{
				color: #ff5428;
				float: right;
			}
		}
		.withdraw_fee{
			color: #ff5428;
			margin-top: 20rpx;
			text{
				color: #fc4a5b;
			}
		}
		.withdraw_tip{
			color: #fc4a5b;
			margin-top: 20rpx;
		}
	}
	.mask-box{
		top:200rpx;
	}
	.payment_list_box{
		padding: 0rpx 20rpx;
		position: absolute;
		top: 100rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid #f8f8f8;
		width: 100%;
		z-index: 99;
		.payment_error{
			text-align: center;
			padding: 50rpx 0rpx;
		}
		.radio_box{
			display: block;
			padding: 40rpx 30rpx;
			border-bottom: 1rpx solid #f8f8f8;
			.info{
				align-items: center;
				display: flex;
				.u-image {
					display: inline-block;
					margin-right: 10rpx;
				}
			}
			.radio{
				float: right;
			}
		}
		.payment_manage{
			margin-top: 30rpx;
			color: #ff5428;
			.u-icon{
				border: 1rpx solid #ff5428;
				border-radius: 50%;
				font-size: 20rpx;
				padding: 2rpx;
				margin-right: 5rpx;
				line-height: 50rpx;
			}
		}
	}
	.ssdsfs{
		background-color: #ff5428 !important;
	}
</style>